<template>
    <el-card>
        <template #header>
            <div class="card-header">
                <span>用户列表</span>
            </div>
        </template>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="#" width="" />
            <el-table-column prop="username" label="用户名" width="" />
            <el-table-column prop="nickname" label="昵称" width="" />
            <el-table-column prop="sex" label="性别" width="" />
            <el-table-column prop="usable" label="状态" width="">
                <template #default="scope">
                    <el-tag class="ml-2" type="success" v-if="scope.row.usable">启用</el-tag>
                    <el-tag type="info" v-if="!scope.row.usable">禁用</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="tel" label="手机" width="" />
            <el-table-column prop="active" label="操作">
                <template #default="scope">
                    <el-button v-if="!scope.row.usable" type="success" plain size="small">
                        启用
                    </el-button>
                    <el-button v-if="scope.row.usable" type="info" plain size="small">
                        禁用
                    </el-button>
                    <el-button type="danger" plain size="small">
                        <el-icon>
                            <Delete />
                        </el-icon>删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
</template>
<script setup>
import { ref, reactive } from 'vue';
import user from '@/api/user.js';
let tableData = ref([

]);
async function loadList() {
    let { status, data } = await user.list();
    if (status) {
        tableData.value = data;
        console.log(data)
    }
}
loadList();
function handleRemove(id, i) {
    ElMessageBox.confirm(
        '确定要删除此账户吗？',
        '确认',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            // 1.ajax
            // 2.DOM
        })
        .catch(() => {
            ElMessage.info('取消成功！');
        })
}
</script>
